<template>
  <!-- PRIV_TITTLE_CREATE 新增字典标题 - 权限表示 -->
  <div class="app-container main">
    <div class="search_title">

    </div>
    <H5Box ref="hFive" :isAllOrder="isAllOrder" :isDownLoading="isDownLoading" @GetList="GetList" @ReGetList="ReData">
      <van-swipe-cell v-for="(item, index) in list" :key="index">
        <div class="item flex-box l-c-s">
          <div class="left_item c-c-s">
            <div class="top_title">
              <span class="title"> {{ item.label }}</span> {{ item.value }}
            </div>
            <div class="remake">
              备注：<span>{{ item.remark ? item.remark : "- - - -" }}</span>
            </div>
          </div>
          <div class="right_item flex-box l-c-c">
            {{ item.createTime }}
          </div>
        </div>
        <template #right>
          <van-button square type="danger" text="删除" @click="DelTitle(item)" />
          <van-button square type="primary" text="编辑" @click="OpenEdit(item)" />
        </template>
      </van-swipe-cell>
    </H5Box>
    <van-popup v-model="open" closeable round>
      <div class="title_detail">
        <el-form :model="addData" status-icon :rules="rules" ref="addData" label-width="100px"
          class="login_form flex-box c-c-c phone_form">
          <div class="flex-box l-c-c form_item_all">
            <el-form-item prop="label">
              <div class="form_item flex-box c-c-c">
                <el-input v-model.trim="addData.label" placeholder="请输入字典标题"></el-input>
              </div>
            </el-form-item>
            <el-form-item prop="sortIndex">
              <div class="form_item flex-box c-c-c">
                <el-input v-model.trim="addData.sortIndex" placeholder="请输入字典标题排序值"></el-input>
              </div>
            </el-form-item>
          </div>
          <div class="flex-box l-c-c form_item_all">
            <el-form-item prop="value">
              <div class="form_item flex-box c-c-c">
                <el-input v-model.trim="addData.value" placeholder="请输入字典标题值"></el-input>
              </div>
            </el-form-item>
          </div>
          <div class="flex-box l-c-c form_item_all">
            <el-form-item>
              <div class="form_item flex-box c-c-c">
                <el-input v-model.trim="addData.remark" type="textarea" :autosize="{ minRows: 3, maxRows: 5 }"
                  placeholder="请输入字典标题备注"></el-input>
              </div>
            </el-form-item>
          </div>
          <div class="flex-box l-c-c form_item_all">
            <el-form-item>
              <div class="form_item flex-box c-c-c">
                <el-button type="success" @click="SubmitForm" class="submit_form flex-box l-c-c">保存</el-button>
              </div>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </van-popup>
  </div>
</template>

<script type="javascript/text">
import {
  titleAdd,
  titleList,
  titleOne,
  editAdd,
  delTitle,
} from "@/api/system/title";
import { getToken, setToken, removeToken } from "@/utils/auth";
import { Edit } from "vxe-table";
import H5Box from "../../../components/H5Box/H5Box.vue";
export default {
  components: { H5Box },
  data() {
    return {
      /**请求参数 */
      searchData: {
        label: "",
        // orderBy: "",
        pageIndex: 1,
        pageSize: 30,
      },
      /**总数 */
      total: 0,
      /**列表数据 */
      list: [],
      isAllOrder: false,
      isDownLoading: false,
      /**添加参数 */
      addData: {
        label: "",
        value: "",
        sortIndex: 0,
        remark: "",
      },
      /**新增的对话框标题 */
      title: "",
      /**开关 */
      open: false,
      // 表单校验
      rules: {
        label: [{ required: true, message: "标题不能为空", trigger: "blur" }],
        value: [{ required: true, message: "值不能为空", trigger: "blur" }],
        sortIndex: [
          { required: true, message: "排序不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    /**获取字典标题数据 */
    async GetList() {
      this.isDownLoading = true;
      let { data, statusCode } = await titleList(this.searchData);
      if (statusCode != 200) return;

      this.total = data.totalCount;
      if (this.searchData.pageIndex == 1) {
        this.list = data.dataSource;
      } else {
        this.list = this.list.concat(data.dataSource);
      }
      if (this.searchData.pageIndex == data.totalPages) {
        this.isAllOrder = true;
      } else {
        this.isAllOrder = false;
        this.searchData.pageIndex++;
      }
      this.isDownLoading = false;
    },
    /**重置请求数据 */
    async ReData() {
      this.searchData = {
        label: "",
        pageIndex: 1,
        pageSize: 30,
      };
      await this.GetList();
      setTimeout(() => {
        this.$refs.hFive.loading = false;
      }, 1000);
    },
    /**新增字典标题 */
    OpenAddTitle() {
      this.title = "新增字典标题";
      this.addData = {
        label: "",
        value: "",
        sortIndex: 0,
        remark: "",
        id: undefined,
      };
      this.open = true;
    },
    /**编辑字典标题 */
    async OpenEdit(row) {
      this.title = "编辑字典标题";

      let { data, statusCode } = await titleOne(row.id);
      if (statusCode != 200) return;
      this.addData = data;
      this.open = true;
    },

    /** 提交按钮 */
    SubmitForm() {
      this.$refs["addData"].validate(async (valid) => {
        if (valid) {
          if (this.addData.id != undefined) {
            let { statusCode } = await editAdd(this.addData);
            if (statusCode != 200) return;
          } else {
            let { statusCode } = await titleAdd(this.addData);
            if (statusCode != 200) return;
          }
          this.$message({
            message: this.addData.id != undefined ? "保存成功" : "添加成功",
            type: "success",
            center: true,
          });
          this.open = false;
          this.GetList();
        }
      });
    },
    /**删除字典标题 */
    async DelTitle(item) {
      this.$dialog
        .confirm({
          message: `请确认是否删除当前标题？（${item.label}）`,
        })
        .then(async () => {
          let { statusCode } = await delTitle(item.id);
          if (statusCode != 200) return;
          this.$message({
            message: "删除成功",
            type: "success",
            center: true,
          });
          this.ReData();
        })
        .catch(() => {
          // on cancel
          console.log("取消");
        });
    },
  },
  created() {
    this.GetList();

    window.addEventListener("scroll", this.handleScroll);
  },
  mounted() { },
};
</script>
<style lang="scss" scoped src="./indexM.scss"></style>